<template>
  <div class="commissionSource">
    <!-- 佣金来源 -->
    <h6 class="hLabel">佣金来源</h6>

    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :disabled="false"
      :toolbar="false"
      cache-key="systemUserTable"
    >
      <!-- 名称 -->
      <template v-slot:tradeName="{ row }">
        <div class="realNameStyle display">
          <img class="avaterName" :src="row.rotationChart" alt="" />
          <div class="flex-column-start">
            <div>{{ row.tradeName }}</div>
          </div>
        </div>
      </template>
    </ele-pro-table>
  </div>
</template>
<script>
  import { commissionSource } from '@/api/distributionWithdrawal/index';
  import { commissionSourceList } from '../constant/constant';
  export default {
    name: 'commissionSource',
    props: {
      withdrawalRecordsId: {
        type: Number,
        default: null
      }
    },
    components: {},
    activated() {},
    data() {
      return {
        commissionSourceList,
        id: null,

        // 表格列配置
        columns: [
          {
            prop: 'tradeName',
            label: '订单信息',
            sortable: 'custom',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            slot: 'tradeName'
          },
          {
            prop: 'disbursements',
            label: '订单金额',
            sortable: 'custom',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'applicationsAmount'
          },
          {
            prop: 'money',
            label: '所得佣金',
            sortable: 'custom',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'reflectionType'
          },
          {
            prop: 'nickname',
            label: '佣金来源',
            sortable: 'custom',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'createDate',
            label: '时间',
            sortable: 'custom',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'currentState',
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
            }
          }
        ],
        // 表格选中数据

        drawerReflectBoolen: false
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      // 服务状态
      currentStateType() {
        return function (currentStateType) {
          // console.log(applyType)
          if (currentStateType == '1') {
            return {
              status: '体现中',
              type: 'success'
            };
          } else if (currentStateType == '2') {
            return {
              status: '已体现',
              type: ''
            };
          } else if (currentStateType == '3') {
            return {
              status: '已驳回',
              type: 'danger'
            };
          }
        };
      },
      // 实名认证
      reflectionType() {
        return function (reflectionType) {
          if (reflectionType == '1') {
            return {
              status: '微信',
              type: 'success'
            };
          } else {
            return {
              status: '支付宝',
              type: ''
            };
          }
        };
      }
    },
    methods: {
      // 点击查看详情弹出详情抽屉
      viewDetail() {
        // 用户余额管理
        this.drawerReflectBoolen = !this.drawerReflectBoolen;
        // 评论
        //   this.drawComment = !this.drawComment
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return commissionSource({ page, limit, ...where, id: this.id });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where, types: 1 });
      },

      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        mealDelete({ ids: [row.id] })
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        this.$confirm('确定要删除选中的套餐吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            removeMeal({ ids: this.selection.map((d) => d.id) })
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      }
    },
    watch: {
      withdrawalRecordsId: {
        immediate: true,
        handler(visible) {
          if (visible) {
            console.log(visible);
            this.id = visible;
          } else {
            this.$nextTick(() => {
              this.$refs['form'].resetFields();
              console.log(this.form);
            });
          }
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .commissionSource {
    .hLabel {
      margin: 15px 0 20px;
      font-weight: 700;
      &::before {
        content: '';
        display: inline-block;
        vertical-align: top;

        margin-right: 10px;
        height: 23px;
        width: 4px;
        background-color: #1e6ceb;
      }
    }
    .realNameStyle {
      .avaterName {
        width: 52px;
        height: 52px;

        vertical-align: middle;
        margin-right: 5px;
      }
      .technicianName {
        color: #1890ff;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
      }
    }
    .orderrowinfo {
      width: 100%;
      display: flex;
      margin-left: 15px;
      padding: 30px;
      height: 50px;
      align-items: center;
      background-color: #f8f8f8;
      .orderNumber,
      .createDate,
      .buyName,
      .iphone {
        margin-right: 40px;
        color: #000;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
      }
    }
  }
</style>
